﻿@extends('common.header')
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">

<title>{{ $tdk->title }}{{ $webConfig->webName }}</title>
<meta name="Keywords" content="{{ $tdk->keywords }}" />
<meta name="Description" content="{{ $tdk->desc }}"/>
<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/photos/pic-lib-index.css') }}"/>
<script type="text/javascript" src="{{ asset('/js/jquery-1.8.3.min.js') }}"></script>


<script type="text/javascript">

    function dochange(id) {
        // 获得当前显示的 是第几组
        var group = parseInt($("#category_" + id).attr('group'));
        // 获取 当前图库 一共有几组
        var total = parseInt($("#div_" + id + "_" + group).attr('total'));
        if (total == 1) {
            return false;
        }
        // 当前显示的 是第几组  先隐藏掉
        $("#div_" + id + "_" + group).slideUp();
        // 新的打开
        group = group + 1;
        total = total - 1;
        if (group > total) {
            group = 0;
        }
        $("#div_" + id + "_" + group).slideDown();
        $("#category_" + id).attr('group', group);

    }

</script>


<!--<script>
    $(function () {

        // 跳转 到 指定位置
        $("#asideLeft li[liclick]").click(function () {
            $(this).siblings('li').removeClass('current');
            $(this).addClass('current');
            var category_id = $(this).attr('liclick');
            location.href = "#cate_" + category_id;
        });


        // 置顶 按钮
        $("#btnTotop,#firstPhoto").click(function () {
            $(this).siblings('li').removeClass('current');
            $(this).addClass('current');
            scrollBy(0, 0);
        });

    });
</script>-->
</head>
<body style="background:#fff">

<!--面包屑导航-->
<div style="width: 1200px;height: 40px;line-height:40px;position: relative;margin: 110px auto 0">
    <ol style="float: left;overflow: hidden;color: #333;list-style: none;">
        <li style="float: left;margin-left: 5px">当前位置：</li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/') }}"
                                                                      style="color: #de1e30;margin-left: 5px">首页</a>
        </li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/photoList') }}"
                                                                      style="color: #de1e30;margin-left: 5px">> 图库</a>
        </li>
    </ol>
</div>


<div style="overflow:hidden;margin-top:130px;width:1200px;margin:0 auto 0;">
	<!--右侧 图库 列表-->
	@forelse( $category as $key=> $category_info )
	<div class="layout style0 yxl" id="cate_{{  $category_info->id  }}">

		<div class="hd">
			<a href="{{ url('/photoCategoryList') }}/{{ $category_info->id  }}"><h2>{{ $category_info->name }}</h2></a>
			<b class="border"></b>
			<a href="javascript:;" class="changeBnt" id="category_{{ $category_info->id }}" group="0"
			   onclick="dochange({{ $category_info->id }});"><i></i>换一换</a>
		</div>

		@forelse( $pics[$key] as $ke=> $pics_info )

		@if( $ke==0 )
		<div class="bd" id="div_{{ $category_info->id }}_{{ $ke }}" total="{{ count($pics[$key]) }}">
			@else
			<div class="bd" id="div_{{ $category_info->id }}_{{ $ke }}" total="{{ count($pics[$key]) }}"
				 style="display:none;">
				@endif
				<ul class="picLB" id="picLBxxl">

					@forelse( $pics_info as $k=> $pic_info )

					<li>

						<dl class="picDl">

							<dd>
								<a href="{{ url('/photoDetail')  }}/{{ $pic_info['id'] }}" class="pic"><img
										src="{{ $pic_info['pic_url'] }}" title="{{ $pic_info['title'] }}"
										alt="{{ $pic_info['title'] }}"/></a>
								<div class="ftBox">
									<div class="tit"><a href="{{ url('/photoDetail')  }}/{{ $pic_info['id'] }}">{{ $pic_info['title'] }}</a></div>
									<div class="text">{{ $pic_info['desc'] }}</div>
								</div>
							</dd>

						</dl>

					</li>

					@empty
					@endforelse

				</ul>

			</div>
			@empty
			@endforelse

		</div>
		@empty
		@endforelse

	</div>

</div>
<!--<script>
  
		//4.拖动滚轮，对应的楼梯样式进行匹配
		$('.layout').each(function(){
			  var $scroll=$(this).scrollTop();
			var $loutitop=$('.layout').eq($(this).index()).offset().top+400;
			console.log($loutitop);
			if($loutitop>$scroll){//楼层的top大于滚动条的距离
				$('#asideLeft li').removeClass('active');
				$('#asideLeft li').eq($(this).index()).addClass('active');
				return false;//中断循环
			}
		});
        //2.获取每个楼梯的offset().top,点击楼梯让对应的内容模块移动到对应的位置  offset().left
        
        var $loutili=$('#asideLeft li').not('.last');
        $loutili.on('click',function(){
            $(this).addClass('active').siblings('li').removeClass('active');
            var $loutitop=$('.layout').eq($(this).index()).offset().top;
            //获取每个楼梯的offsetTop值
            $('html,body').animate({//$('html,body')兼容问题body属于chrome
                scrollTop:$loutitop
            })
        });
        //3.回到顶部
        $('.last').on('click',function(){
            $('html,body').animate({//$('html,body')兼容问题body属于chrome
                scrollTop:0
            })
        });
</script>-->

@extends('common.footer')
</body>
</html>